<template>
  <div class="login">
     
    <div class="login-title"><p>We重邮</p></div>

    <van-field
      v-model="number"
      type="number"
      label="账号"
      placeholder="请输入统一认证吗"
      label-width="70"
      :style="{'margin-top':'20px'}"
        maxlength="7"
    />
    <van-field
      v-model="password"
      type="password"
      label="密码"
      placeholder="请输入密码"
      label-width="70"
      :style="{'margin-top':'20px'}"
      maxlength="10"
    />
    <div class="help">
      <span @click="help">帮助<van-icon name="question-o" /></span>
    </div>
    <div class="button" @click="loginClick"><span>确认登录</span></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
   
      number: null,
      password: null,
     
    };
  },
  methods: {
    help() {
      this.$msg.fail("密码为身份证后六位");
    },
    loginClick(){
      var reg=/^[0-9]{7}$/
       if(!this.number||!reg.test(this.number)){
         this.$msg.fail("请输入正确账号！")
         
       }
      else if(!this.password||this.password.length<6){
         this.$msg.fail('请输入正确密码！')
       }
       else{
             this.$http.post('/login',JSON.stringify({number:this.number,password:this.password})).then(res=>{
              this.$msg.fail(res.data.msg)
               if(res.data.code==2)
               {
                localStorage.setItem('id',this.number)
                localStorage.setItem('password',this.password)
                  setTimeout(() => {
                      this.$router.push('/mine')
                  }, 1000);
               }
             })
            
           
       }
    }
  },
};
</script>



<style scoped>
.login-title {
  height: 300px;
  font-size: 60px;
  color: aliceblue;
  background-image: linear-gradient(rgb(132, 212, 225), rgb(119, 223, 178));
  text-align: center;
  padding-top: 20px;
}
.login-title p {
  margin: 10px;
  font-family: sans-seri;
}
.help {
  color: rgb(205, 205, 205);
  text-align: end;
}
.button {
  margin-top: 50px;
  text-align: center;
  font-size: 20px;
  background-color: rgb(121, 223, 182);
  height: 50px;
  width: 100%;
  line-height: 50px;
  color: aliceblue;
  border-radius: 40px;
}
</style>